<template>
  <div class="app-container">
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-position="left"
      label-width="150px"
    >
      <el-card>
        <el-form-item label="题目类型 " prop="quType">
          <el-select
            v-model="formData.quType"
            :disabled="quTypeDisabled"
            class="filter-item"
            @change="handleTypeChange"
          >
            <el-option
              v-for="item in quTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="难度等级 " prop="level">
          <el-select v-model="formData.level" class="filter-item">
            <el-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="归属题库" prop="repoIds">
          <el-select v-model="formData.repoIds" multiple class="filter-item">
            <el-option
              v-for="item in repoList"
              :key="item.value"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="题目内容" prop="content">
          <quill-editor
            ref="myQuillEditor"
            v-model="formData.content"
            style="height: 400px"
            :options="editorOption"
          />
        </el-form-item>

        <br /><br /><br /><br /><br /><br />

        <el-form-item label="试题图片">
          <el-upload
            action="http://process.env.VUE_APP_BASE_API/upload"
            list-type="picture-card"
            name="img"
            :on-success="uploadSuccess"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>

        <el-form-item label="整题解析" prop="oriPrice">
          <el-input
            v-model="formData.analysis"
            type="textarea"
            :precision="1"
            :max="999999"
          />
        </el-form-item>
      </el-card>

      <div
        v-if="formData.quType != 4"
        class="filter-container"
        style="margin-top: 25px"
      >
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="small"
          plain
          @click="handleAdd"
        >
          添加
        </el-button>

        <el-table
          :data="formData.answerList"
          :border="true"
          style="width: 100%"
        >
          <el-table-column label="是否答案" width="120" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isRight">答案</el-checkbox>
            </template>
          </el-table-column>

          <el-table-column label="选项图片" width="220px" align="center">
            <template slot-scope="scope">
              <el-upload
                :limit="1"
                action="http://process.env.VUE_APP_BASE_API/upload"
                list-type="text"
                name="img"
                :on-success="
                  (response, file, fileList) => {
                    return uploadSuccess(response, file, fileList, scope.row)
                  }
                "
              >
                <i class="el-icon-plus" />
              </el-upload>
            </template>
          </el-table-column>

          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.content" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="答案解析">
            <template slot-scope="scope">
              <el-input v-model="scope.row.analysis" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeItem(scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 20px">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button type="info" @click="onCancel">返回</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { fetchRepos } from '@/api/repo'
import { quillEditor } from 'vue-quill-editor'
import { save, findByQuId } from '@/api/qu'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: { quillEditor },
  data () {
    return {
      editorOption: {},
      quTypes: [
        { value: 1, label: '单选题' },
        { value: 2, label: '多选题' },
        { value: 3, label: '判断题' },
        { value: 4, label: '简答题' }
      ],
      levels: [
        { value: 1, label: '普通' },
        { value: 2, label: '较难' }
      ],

      formData: {
        quType: 1,
        level: 1,
        repoIds: [],
        content: '',
        answerList: [
          { isRight: 0, content: '', analysis: '' },
          { isRight: 0, content: '', analysis: '' },
          { isRight: 0, content: '', analysis: '' },
          { isRight: 0, content: '', analysis: '' }
        ]
      },
      repoList: []
    }
  },
  watch: {
    'formData.quType': {
      handler (newVal, oldVal) {
        if (newVal == 3) {
          this.formData.answerList = [
            { isRight: 0, content: '错误', analysis: '' },
            { isRight: 0, content: '正确', analysis: '' }
          ]
        }

        if (newVal == 1 || newVal == 2) {
          this.formData.answerList = [
            { isRight: 0, content: '', analysis: '' },
            { isRight: 0, content: '', analysis: '' },
            { isRight: 0, content: '', analysis: '' },
            { isRight: 0, content: '', analysis: '' }
          ]
        }

        if (newVal == 4) {
          this.formData.answerList = []
        }
      }
    }
  },
  created () {
    // 获取所有题库
    fetchRepos().then(res => {
      this.repoList = res.data
    })
    findByQuId(this.$route.query.quId).then(res => {
      this.formData = res.data
      this.formData.answerList.forEach(item => {
        if (item.isRight) {
          item.isRight = true
        } else {
          item.isRight = false
        }
      })
      console.log(res.data)
    })
  },
  methods: {
    uploadSuccess (response, file, fileList, row) {
      if (row) {
        row.images = response.data
      } else {
        this.formData.image = response.data
      }
    },
    handleAdd () {
      if (this.formData.quType == 1 || this.formData.quType == 2) {
        this.formData.answerList.push({ isRight: 0, content: '', analysis: '' })
      }
    },
    removeItem (index) {
      if (this.formData.quType == 1 || this.formData.quType == 2) {
        this.formData.answerList.splice(index, 1)
      }
    },

    submitForm () {
      // 表单校验

      this.formData.answerList.forEach(item => {
        if (item.isRight) {
          item.isRight = 1
        } else {
          item.isRight = 0
        }
      })
      save(this.formData).then(res => {
        // message
        this.$message({
          type: res.code == 0 ? 'success' : 'error',
          message: res.msg
        })
        // 路由跳转 列表页
        if (res.code == 0) {
          this.$router.push({ path: '/qu/list' })
        }
      })
    }
  }
}
</script>
